<template>
    <page>
        <step :value="2"></step>
        <section class="px12 tc of">
            <p class="c2 f14 mt10">{{tips}}</p>
            <p class="f14 mt10">请上传不超过2M大小的图片</p>
            <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="display: none"
                   ref="fileInput" @change="onChange" v-if="resetInput">
            <div class="rel imgbox mt20" flex="main:center cross:center">
                <img :src="image.src" style="max-width: 100%;max-height: 100%">
                <m-button class="inline md bg2 abs posc" @click.native="onSelectFile">点击上传</m-button>
            </div>

            <m-button class="mt60" @click.native="submit">提交</m-button>
        </section>
    </page>
</template>
<script>
  import step from './_step.vue'
  import Upimg from './upimg'
  import urljoin from 'url-join'
  import checker, { required } from '@/utils/checker'

  export default {
    data () {
      const params = this.$route.params
      console.log(params)
      return {
        tips: '可上传证件：机动车行驶证 / 机动车驾驶培训教练员证',
        uploading: false,
        url: urljoin(baseURL, 'wx/upload/img'),
        form: {
          image1: null,
          ...params
        },
        image: {
          src: ''
        },
        resetInput: true
      }
    },
    computed: {},
    methods: {
      PitsPullData () {},
      PitsPushData () {},
      onSelectFile () {
        this.$refs.fileInput.click()
      },
      onChange () {
        const files = this.$refs.fileInput.files[0]
        this.preview_upload(files)
        this.handlerResetInput()
      },
      // 图片预览 并上传图片
      preview_upload (file) {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = async result => {
          const image = {
            file: file,
            src: result.target.result,
            progress: 0,
            state: null,
            compressIng: false
          }
          this.image = image
          await this.$nextTick()
          const upimg = new Upimg(this.url, image)
          await upimg.compress()
          upimg.start(cloudImg => {
            this.form.image1 = cloudImg
          }) // 上传成功，并触发返回 “云图片地址” 事件
        }
      },
      async handlerResetInput () {
        this.resetInput = false
        await this.$nextTick()
        this.resetInput = true
      },
      // 更新车牌号
      async updateCarCode () {
        const {id} = await this.$store.getters.userInfo
        let {code, obj} = await this.$post_json_loading('member/updateUser', {
          id,
          carCode: this.form.carCode
        })
        if (code == 200 && !obj) {
          const mgs = '更新车牌号出错'
          m_alert(mgs)
          throw new Error(mgs)
        }
      },
      async submit () {
        const form = this.form
        const checkerImg = [form.image1, required('请上传图片')]
        if (!checker(checkerImg)) return
        console.log(form)
        await this.updateCarCode()
        const body = await this.$post_json_loading('admin/car/addSpecialCar', this.form)
        this.$store.dispatch('updateUserInfo')
        body.obj && this.$router.push({name: 'specialCar_step4'})
      }
    },
    components: {step}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .imgbox {
        height: 300px;
        background-color: white;
    }
</style>
